import { IconKey } from '@/types';
import { getIcon } from '@/utils';
import React from 'react';

type Props = {
   children?: React.ReactNode;
   icon: IconKey;
   title?: string;
   moreInfo?: React.ReactNode;
   onClose?: () => void;
   open: boolean;
};

const Drawer = ({ open, onClose, icon, title, children, moreInfo }: Props) => {
   const handleOuter = () => {
      onClose();
   };

   const handleInner = (e) => {
      e.stopPropagation();
   };

   return open ? (
      <div
         className="fixed top-0 right-0 left-0 bottom-0 bg-slate-600 bg-opacity-40 z-10"
         onClick={handleOuter}
      >
         <div
            className="absolute left-1/3 h-full bg-slate-50 right-0 shadow-md transition py-5 pl-4 pr-2"
            onClick={handleInner}
         >
            <div className="absolute top-4 -left-3 rounded-full bg-main shadow-lg p-0.5">
               {getIcon(icon, {
                  type: 'white',
               })}
            </div>
            <div className="ml-2 mb-2 flex justify-between items-center">
               <span>{title}</span>
               {moreInfo}
            </div>
            <div className="space-y-2">{children}</div>
         </div>
      </div>
   ) : null;
};

export default Drawer;
